<template>
    <div class="w750">
        <div class="chooseAccount">
            <div class="account-cont">
                <div class="account-cont-top">
                    <span class="card">银行卡 （1-3个工作日到账）</span>
                    <span class="add" @click="addBankCard">添加</span>   
                </div>
                <div class="account-cont-bottom" >
                        <div class="account-cont-bottom-item"
                            v-for="(item,index) in cardList" :key="index"
                            @click="selectItem(item.defaultCard,index,item.id,item.bankCode,item.check)"
                        >
                            <div class="card-name">
                                <img :src="$staticServer + 'static/images/bank/' + item.bankCode + '.png'" />
                            </div>
                            
                            <div class="card-msg">
                                <div class="card-msg-top">{{item.bankName}} <span class="item-label" v-if="item.defaultCard">默认</span></div>
                                <div class="card-msg-bootom">{{item.bankCardNumber}}</div>
                            </div>
                            <img src="@/assets/images/check@2x.png"  v-if="item.defaultCard" class="item-check">
                        </div>
                </div>
            </div>

            
            <!-- v-if="wxconfing.openId" -->
            <div class="account-cont" v-if="wxconfing.openId" >
                <div class="account-cont-top" >
                    <span class="card">微信钱包 （3-5个工作日到账）</span>
                    <!-- <span class="add">添加</span> -->
                </div>
                <div class="account-cont-bottom" @click="setWxDefauDeflt">
                    <div class="account-cont-bottom-item">
                        <div class="card-name">
                            <img src="@/assets/images/pay-wei.png" alt="" srcset="">
                        </div>
                        <div class="card-msg">
                            <div class="card-msg-top">{{wxconfing.weChatName ? wxconfing.weChatName  : '微信钱包' }}  <span class="item-label" v-if="wxconfing.default">默认</span></div>
                        </div>
                        <img src="@/assets/images/check@2x.png"  v-if="wxconfing.default" class="item-check">
                    </div>
                </div>
            </div>

            <p class="tisp-cont">到账账户相关疑问，<span style="color:rgb(77, 158, 240)" @click="gowithdrawProblem">点击查看</span></p>

            <!--银行卡选择操作 -->
            <van-action-sheet 
                :safe-area-inset-bottom="true" 
                :round="false" 
                cancel-text="取消"
                v-model="setShow" 
                :actions="configCard" 
                @select="onSelect"
            >
            </van-action-sheet>

            <van-action-sheet 
                :safe-area-inset-bottom="true" 
                :round="false" 
                cancel-text="取消"
                v-model="wxsetShow" 
                :actions="wxselectArr" 
                @select="onwxSelect"
            >
            </van-action-sheet>


        </div>
    </div>
</template>

<script>
import {loadWithdrawReceiverAccount,defaultWithdrawBankCard,delWithdrawBankCard , toApplyCash , integralWithdraw} from 'api/extensionApi';
let bankCardId = null
let defaultAccountType = ''
const actions =  [
  {
    type: 'default',
    name: '设置为默认账户'
  },
  {
    type: 'use',
    name: '使用银行卡'
  },
  {
    type: 'amend',
    name: '修改银行卡'
  },
  {
    type: 'delete',
    name: '删除银行卡'
  }
]


const wxActions = [
  {
    type: 'default',
    name: '设置为默认账户'
  },
  {
    type: 'use',
    name: '使用微信钱包'
  },
]

export default {
    data() {
        return {
            cardList: [],
            setShow: false,
            configCard: [],
            wxselectArr: [], //微信钱包的配置项
            cardId: '', //被选的卡id
            selectIndex: 0, //选中的id

            wxconfing: {
                openId: '',
                weChatName: '',
                default: false,
                check: false
            },
            wxsetShow: false
        }
    },
    mounted() {
        this.configCard = actions
        // if (this.$route.query.defaultAccountType == 'WECHAT_WALLET') {
        //     this.wxconfing.default = true
        // }
        bankCardId = this.$route.query.bankCardId
        defaultAccountType =  this.$route.query.defaultAccountType

        //提现收款账户 -- 银行卡列表
        this.getWithdrawReceiverAccount()
    },
    methods: {


        
        getWithdrawReceiverAccount() {
            loadWithdrawReceiverAccount({
                channel: 'H5'
            }).then(res => {
                if (res.status != 1) {
                    this.$toast(res.msg)
                    return 
                }
                let bankCardList = res.result.bankCardList ? res.result.bankCardList : []

                // bankCardList.forEach((item,index) => {
                //     item.check = false
                //     if (item.defaultCard == true) {
                //         item.check = true
                //     }

                //     if (bankCardId && bankCardId == item.id) {
                //         bankCardList.forEach(v => v.check = false)
                //         item.check = true
                //     }
                // })

                // if (defaultAccountType == 'WECHAT_WALLET') {
                //     bankCardList.forEach(v => v.check = false)
                //     this.wxconfing.check = true
                // }


                this.wxconfing.openId = res.result.openId
                this.wxconfing.weChatName = res.result.weChatName
                this.wxconfing.default = res.result.defaultAccountType != 'BANK_CARD' ? true : false
                this.cardList = bankCardList

                // if (this.wxconfing.default) {
                //     this.wxconfing.check = true
                // }

                // if (this.cardList.some(v => v.check)) {
                //     this.wxconfing.check = false
                // }
                

            })
        },
        //点击当前的银行卡item项
        selectItem(select,index,cardId,bankCode,check) {
            let actionArr = [...actions]

            actionArr = select ? actions.filter(v => v.type != 'default') : actionArr  

            this.setShow = true
            this.cardId = cardId
            this.selectIndex = index
            this.configCard = check ? actionArr.filter(v => v.type != 'use') : actionArr  
            this.receiverAccount = bankCode
        },
        //银行卡类型选择
        onSelect(item) {
           const {name,type} = item
            
            //设置默认银行卡
            if (item.type == 'default') {
                this.setDefaultWithdrawBankCard(this.cardId)
            } else if (item.type == 'delete') {
                this.handleDelWithdrawBankCard(this.cardId)
            } else if (item.type == 'amend') {
                this.$router.push({
                    path: "/addBankCard",
                    query: {
                        source: 'edit',
                        bankCardId: this.cardId
                    }
                });
                //  '/addBankCard'
            } else if (item.type == 'use') {
                
                this.gettoApplyCash({bankCardId: this.cardId,defaultAccountType: 'BANK_CARD'})

            }
            
            this.setShow = false

        },
        onwxSelect(item) {
            let that = this
            const {name,type} = item
            if (item.type == 'default') {
                defaultWithdrawBankCard({receiverAccount:'WECHAT_WALLET'}).then(res => {
                    if (res.status != 1) {
                        that.$toast(res.msg)
                        return 
                    }
                    that.$toast('设置成功')

                        // on confirm
                    that.cardList.forEach((item, i) => {
                        item.defaultCard = false
                    })

                    that.wxconfing.default = true

                })
            } else if (item.type == 'use') {
                this.gettoApplyCash({defaultAccountType: 'WECHAT_WALLET'})
            }

            this.wxsetShow = false
        },


        //选择到账方式
        gettoApplyCash(params) {

            

            const apiType = this.$route.query.source == 'integral' ? integralWithdraw : toApplyCash

			apiType({
                channel: 'H5',
                ...params
            }).then(res =>{ 
                    if( res.status == 1) {
                        res.result ? res.result : (res.result = {})
                        res.result.flag = true
                        this.$store.dispatch('setAccountMessage',res.result)
                        // 设置一个选择过银行卡flag
                        sessionStorage.setItem('flag',true)
                        this.$router.back();
                        this.$router.isBack = true;

                    } else {
                        this.$toast({duration: 1000,message:res.msg})
                    }
                });
		},
        //设置默认
        setDefaultWithdrawBankCard(id) {
          defaultWithdrawBankCard({bankCardId: id,receiverAccount:'BANK_CARD'}).then(res => {
            if (res.status != 1) {
                this.$toast(res.msg)
                return 
            }
            this.$toast('设置成功')

       

            this.cardList.forEach((item, i) => {
                i !== this.selectIndex && (item.defaultCard = false)
            })

        

            this.cardList[this.selectIndex].defaultCard = true

            let str = this.cardList.splice(this.selectIndex,1)
            this.cardList.unshift(str[0])
            this.wxconfing.default = false


          })
        },

        //设置微信默认钱包
        setWxDefauDeflt(){
            let that = this
            if (this.wxconfing.default && this.wxconfing.check) {
                return
            }
            let actionArr = [...wxActions]

            actionArr = this.wxconfing.default ? wxActions.filter(v => v.type != 'default') : actionArr  

            this.wxsetShow = true
            this.wxselectArr = this.wxconfing.check ? actionArr.filter(v => v.type != 'use') : actionArr
            
        },

        //删除银行卡
        handleDelWithdrawBankCard(id) {

            delWithdrawBankCard({bankCardId:id}).then(res =>{
                if (res.status != 1) {
                    this.$toast(res.msg)
                    return 
                }
                this.$toast('删除成功')
                this.cardList.splice(this.selectIndex,1)

            })
        },
        addBankCard() {
           this.$router.push('/addBankCard');
        },
        //提醒记录
        gowithdrawProblem() {
		    this.$router.push({
				path: `/withdrawProblem`,
			});
		},
    },
    // destroyed() {
    //     this.$EventBus.$off('msg')
    // },
}
</script>

<style lang="stylus" scoped>

.chooseAccount {
    width: 100%;
    padding: 0 0.20rem;
}

.account-cont {
    background: #fff;  
    margin-top: 0.20rem;
}

.account-cont .account-cont-top {
    display: flex;
    font-size: 0.28rem;   
    height: 0.88rem;
    line-height: 0.88rem;
    border-bottom: 1px solid #f8f8f8;
    padding: 0 0.30rem; 
}

.account-cont .account-cont-top .add {
    margin-left: auto;
    color: rgb(77, 158, 240);
}   
.account-cont-bottom {
    padding: 0 0.30rem;

}
.account-cont-bottom .account-cont-bottom-item {
    display: flex;
    border-bottom: 1px solid #f8f8f8;
    padding: 0.35rem 0 ;
}

.account-cont-bottom .account-cont-bottom-item:last-child {
  border: none; 
}

.account-cont-bottom .card-name {
    width: 0.80rem;
    height: 0.80rem;
}
.account-cont-bottom .card-name img {
    width: 100%;
    height: 100%;
}

.account-cont-bottom .card-msg {
  display: flex;
  flex-flow: column;
  justify-content: center;
  /* align-items: center; */
  /* align-content: center; */
  margin-left: 0.20rem;
  text-align: left;
}
.account-cont-bottom .card-msg .card-msg-top {
  font-size: 0.30rem;
  margin-bottom: 4px;
  margin-top: -1px;
}


.account-cont-bottom .card-msg .card-msg-bootom {
  font-size: 0.26rem;
}
.account-cont-bottom .card-msg .card-msg-top {
}
.account-cont-bottom .card-msg .card-msg-bootom {
  color:rgb(175,175,175);
}

.tisp-cont {
    margin-top: 0.30rem;  
    font-size: 0.28rem;
    color: #cccccc;
}   

.item-label{ 
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 12px;
    color: #f60;
    background-color: rgba(255, 102, 0, .15);
    border-radius: 1px;
    vertical-align: middle;
}
.item-check {
  width: 13px;
  height: 10px;
  margin: 14px 16px;
  margin-left: auto;
}
</style>